<template>
  <div class="group-tip-element-wrapper">
    {{ text }}
  </div>
</template>

<script>
export default {
  name: 'GroupTipElement',
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  computed: {
    text() {
      return this.getGroupTipContent(this.message.payload);
    }
  },
  methods: {
    getGroupTipContent(payload) {
      switch (payload.operationType) {
        case this.TIM.TYPES.GRP_TIP_MBR_JOIN:
          return `群成员：${payload.userIDList.join(',')}，加入群组`;
        case this.TIM.TYPES.GRP_TIP_MBR_QUIT:
          return `群成员：${payload.userIDList.join(',')}，退出群组`;
        case this.TIM.TYPES.GRP_TIP_MBR_KICKED_OUT:
          return `群成员：${payload.userIDList.join(',')}，被${ payload.operatorID }踢出群组`;
        case this.TIM.TYPES.GRP_TIP_MBR_SET_ADMIN:
          return `群成员：${payload.userIDList.join(',')}，成为管理员`;
        case this.TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
          return `群成员：${payload.userIDList.join(',')}，被撤销管理员`;
        case this.TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
          return '群资料修改';
        case this.TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
          return '群成员资料修改'
        default:
          return '[群提示消息]';
      }
    }
  }
}
</script>

<style scoped>
.group-tip-element-wrapper{
  background:white;
  padding: 4px 15px;
  border-radius: 3px;
  color: #a5b5c1;
  font-size: 12px;
}
</style>